<template>
  <div class="wrapper-ques-item">
    <div class="wrapper-ques-item-hd">
      <p class="wrapper-ques-item-title">
        {{ title }}
      </p>
    </div>
    <div class="wrapper-ques-item-options">
      <wd-radio-group v-model="selectKey" direction="vertical" :style="{ marginBottom: '16px' }" @change="handleChange">
        <view v-for="item in options" :key="item.index" class="radio-group-item" :class="item.index === selectKey ? 'radio-group-item-checked' : ''">
          <wd-radio :value="item.index" checked-color="#34d19d">
            <view class="custom-radio-card-mask">
              <view class="custom-radio-card-mask-dot">{{ item.index }}</view>
            </view>
            <wd-text :text="item.content"></wd-text>
          </wd-radio>
        </view>
      </wd-radio-group>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';


const props = defineProps({
  modelValue: {
    type: [String, Object, Number],
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  options: {
    type: Array,
    required: true,
    default: () => [],
  },
  answer: {
    type: [String, Object, Number],
    required: true,
  },
  // 回显正确答案
  showTrueAnswer: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['update:modelValue'])

const selectKey = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

const handleChange = ({ value }) => {
  // 若回显正确答案，禁止选中其他项
  if(props.showTrueAnswer) {
    selectKey.value = props.answer
  }
}

onBeforeMount(() => {
  props.showTrueAnswer &&  (selectKey.value = props.answer)
})
</script>

<script>
export default {
  options: { styleIsolation: 'shared' }, //加上这句小程序样式穿透也会有效果
};
</script>

<style lang="scss" scoped>

.radio-group-item {
  padding: 24rpx;
  margin-bottom: 46rpx;
  border: 1rpx solid #e5e6eb;
  border-radius: 16rpx;
  
  &-checked {
    background-color: #e8f3ff;
    border: 1rpx solid #6aa1ff;

    .custom-radio-card-mask {
      color: #6aa1ff;
      background-color: #bedaff;
      border: 1px solid #6aa1ff;
    }
  }

  :deep(.wd-radio) {
    margin-top: 0;

    .wd-radio__label {
      display: flex;
      align-items: center;
      gap: 24rpx;
      flex: 1;
      text-align: left;
    }
  }

  :deep(.wd-radio__shape) {
    display: none !important;
  }

  .custom-radio-card-mask {
    height: 46rpx;
    width: 46rpx;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 1px solid #e5e6eb;
    box-sizing: border-box;
  }

  .custom-radio-card-mask-dot {
    font-size: 24rpx;
  }
}

</style>
